<template>
  <div class="sui-navbar">
    <div class="navbar-inner filter">
      <ul class="sui-nav">
        <li
          v-for="item in sortList"
          :class="{ active: item.type === sortInf.type }"
          :key="item.id"
          @click="changeSort(item.type, sortInf.upDown)"
        >
          <a href="javascript:;"
            >{{ item.msg }} <i :class="className" v-show="sortInf.type===item.type">{{className}}</i>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "sortbtns",
  props: ["order", "sortList"],
  methods: {
    async changeSort(type, upDown) {
      // 如果类型一致，就更换order的升降序
      if(+type===this.sortInf.type){
        upDown=upDown==='desc'?'asc':'desc'
      }else{
        upDown='desc'
      }
      this.$emit("sortChange",{type,upDown})
    },
  },
  computed: {
    className(){
      return this.sortInf.upDown==='asc'? '↑':'↓'
    },
    sortInf() {
      return {
        type: +this.order.split(":")[0],
        upDown: this.order.split(":")[1],
      };
    },
  },
};
</script>

<style scoped lang="less">
.sui-navbar {
  overflow: visible;
  margin-bottom: 0;
  .filter {
    min-height: 40px;
    padding-right: 20px;
    background: #fbfbfb;
    border: 1px solid #e2e2e2;
    padding-left: 0;
    border-radius: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
    .sui-nav {
      position: relative;
      left: 0;
      display: block;
      float: left;
      margin: 0 10px 0 0;
      li {
        float: left;
        line-height: 18px;
        a {
          display: block;
          cursor: pointer;
          padding: 11px 15px;
          color: #777;
          text-decoration: none;
        }
        &.active {
          a {
            background: #e1251b;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>